<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-webapp-capable" content="yes">
<title>Analytics</title>
<script src="../dom/__ns__.js"></script>
<script src="../charts/__ns__.js"></script>
<script src="../charts/BaseChart.js"></script>
<script src="../charts/LineChart.js"></script>
<script src="../charts/PieChart.js"></script>
<script src="../charts/DonutChart.js"></script>
<script src="../charts/HoopChart.js"></script>
<script src="../charts/Grid.js"></script>
<script src="../charts/Tooltip.js"></script>
<script src="../locale/__ns__.js"></script>
<script src="../locale/Calendar.js"></script>
<script src="../formatters/__ns__.js"></script>
<script src="../formatters/NumberFormatter.js"></script>
<script src="../formatters/DateFormatter.js"></script>
<script src="__ns__.js"></script>
<script src="providers/__ns__.js"></script>
<script src="providers/GaProvider.js"></script>
<style>
body {background: #ddd;}
html, body, td, th, select, button, input {font-family: arial; font-size: 14px;}
html, body, form, #auth-container, #auth-container table {margin: 0; padding: 0; border: 0; width: 100%; height: 100%;}
form {margin: 0 auto;}
table {border-collapse: collapse; width: 100%;}
td {padding: 3px; white-space: nowrap;}

.grid thead {background: #eee;}
.grid thead,
.grid tfoot {font-weight: bold; text-transform: capitalize;}

.grid thead td,
.grid tbody td,
.grid tfoot td {text-align: right;}

.grid thead td:first-child,
.grid tbody td:first-child {text-align: left;}

.grid,
.grid td {
  border: solid 1px #ccc;
  border-left: 0;
  border-right: 0;
}

.chart {
  height: 300px;
  margin: 0 0 20px;
  width: 100%;
}

#auth-container, #header, #content, #date-range, #report {display: none;}
#auth-container table {vertical-align: middle;}
#auth-container td {text-align:center;}

#header {
  background-color: #D67632;
  background-image: -moz-linear-gradient(top, #F78C40, #D67632);
  /** @alternate */
  background-image: -webkit-gradient(linear, left bottom, left top, from(#D67632), to(#F78C40));
  color: #fff;
  left: 0;
  line-height: 45px;
  position: absolute;
  padding: 0 3%;
  text-shadow: #985813 0 -1px;
  top: 0;
  width: 94%;
}

#header th {text-align: left;}
#header td {padding: 0; text-align: right;}
#header button {margin:0;}

#content {
  padding-top: 50px;
}

#progress {
  background: LemonChiffon;
  border: solid 1px Orange;
  border-radius: 2px;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
  color: #000;
  margin: 0 auto;
  max-width: 150px;
  padding: 3px;
  position: relative;
  text-align: center;
  top: 0;
  width: 50%; 
  z-index: 999;
}

.row {
  background: #fff;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
  margin: 10px 3%;
  padding: 10px;
}

select,
input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #fff;
  border: solid 1px #fff;
  border-bottom: solid 1px #ccc;
  border-radius: 0;
  line-height: 22px;
  margin: 0;
  outline: none;
  padding: 5px;
  width: 100%;
}


@media only screen and (max-device-width: 480px) {
  select,
  input {
    -webkit-appearance: menulist;
  }

  input {
    line-height: 20px;
    max-width: 92%;
    min-width: 92%;
  }
}
</style>
</head>
<body>
<form>
  <div id="progress">Loading</div>
  <div id="auth-container">
    <table><tr><td><button id="authorize-button" type="button">Sign in</button></td></tr></table>
  </div>

  <div id="header">
    <table>
      <tr>
        <th id="user-name"></th>
        <td><button type="button" id="sign-out-button">Sign out</a></button></td>
      </tr>
    </table>
  </div>

  <div id="content">
    <div class="row">
      <table>
        <tr>
          <td style="width:50%">
            <select id="profiles-listbox" name="profiles" style="display: none"><option>Profiles</option></select>
          </td>
          <td style="width:50%">
            <select id="reports-listbox" name="profiles" style="display: none"><option>Reports</option></select>
          </td>
        </tr>
      </table>
    </div>

    <div class="row" id="date-range">
      <table>
        <tr>
          <td style="width:50%"><input id="start-date" name="start-date" type="date"></td>
          <td style="width:50%"><input id="end-date" name="end-date" type="date"></td>
        </tr>
      </table>
    </div>
    <div class="row" id="report"></div>
  </div>
</form>
<script>
var clientId = '467951596411';
var apiKey = '{YOUR_API_KEY}';
var apiKey = '';
var provider = new analytics.providers.GaProvider(clientId, apiKey);
</script>
</body>
</html>